class URLInfo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            key: props.urlKey,
            loading: true,
            tableColumns: [{
                title: '参数名称',
                dataIndex: 'name',
                key: 'name',
            }, {
                title: '参数类型',
                dataIndex: 'type',
                key: 'type',
            }, {
                title: '参数描述',
                dataIndex: 'paramDesc',
                key: 'paramDesc',
            }],
            urlData: []
        };
    }

    getData() {
        var sta = this;
        $.ajax({
            url: "/api/getUrlInfo?urlKey=" + sta.state.key,
            async: false,
            success: function (data) {
                sta.state.loading = false;
                sta.state.urlData = data;
            },
            error: function () {
                antd.message.error('获取url数据失败！！！');
            }
        });
    }

    render() {
        this.getData();
        return (
            <div>
                <antd.Spin spinning={this.state.loading}>
                    <antd.List
                        itemLayout="vertical"
                        size="large"
                        // pagination={pagination}
                        dataSource={this.state.urlData}
                        renderItem={item => (
                            <antd.List.Item key={item.title}>
                                <antd.List.Item.Meta
                                    avatar={<antd.Avatar src={item.avatar}/>}
                                    title={<a href="javascript:void(0);">{item.title}</a>}
                                    description={item.description}
                                />
                                <antd.Collapse>
                                    <antd.Collapse.Panel header="url属性" key="1">
                                        <antd.Table dataSource={item.parmData} columns={this.state.tableColumns}
                                                    pagination={false}/>
                                    </antd.Collapse.Panel>
                                </antd.Collapse>
                            </antd.List.Item>
                        )}
                    />
                </antd.Spin>
            </div>
        );
    }
}